<!-- 渠道统计 -->
<template>
  <div class="channel_page" v-if="hasShow&&list.length">
    <div class="main_label">
      <span>渠道统计</span>
      <span v-show="isEdit&&list.length" @click="sortData" class="sort_btn">调整排序</span>
    </div>
    <div v-show="list.length" class="channel_content">
      <div class="title">
        <div class="channel_flex">
          <span :class="item.fieldName == 'channelName'?'channel_name':'item_num'"
            v-for="item in columns" :key='item.fieldName'>{{item.dailyConfigShortName}}</span>
        </div>
      </div>
      <div class="item">
        <div v-for="(item,index) in list" :key="index" class="channel_flex">
          <div v-for="itemC in columns" :key='itemC.fieldName'
            :class="[itemC.fieldName == 'channelName'?'channel_name':'item_num']">
            <Tooltip v-if="item[itemC.fieldName].length>7" :content="item[itemC.fieldName]"
              placement="top">
              {{item[itemC.fieldName]}}
            </Tooltip>
            <span v-else class="item_num">
              {{item[itemC.fieldName]}}
            </span>
          </div>
        </div>
      </div>
    </div>
    <set-channel ref='setChannel' />
  </div>
</template>

<script>
  import companyApi from '@/biz/backStage/companyCard'
  import homeMgr from '@/biz/buildingHome/home'
  import setChannel from '../modal/setChannel.vue'
  export default {
    props: ['isEdit'],
    components: { setChannel },
    data() {
      return {
        list: [],
        columns: [],
        hasShow: false
      }
    },
    methods: {
      sortData() {
        this.$refs.setChannel.show()
      },
      getTemplate(data) {
        console.log(data, '模板数据 ==== 渠道')
        let fixedColumns = [{ fieldName: 'channelName', dailyConfigShortName: '渠道' }]
        this.hasShow = data.templateAllList[2].hasShow
        let resColumns = data.templateAllList[2].childModelConfig.filter(item => {
          return item.hasLock
        })
        this.columns = [
          ...fixedColumns,
          ...resColumns
        ]
        console.log(this.columns, resColumns, '获取渠道统计表头')
        this.getData()
      },
      getData() {
        let params = {
          page: 1,
          rows: 10,
          buildingId: this.$dt.buildInfo().housesId,
          endTime: this.$parent.currentDate,
          startTime: this.$parent.currentDate
        }
        homeMgr.channelStatistics(params).then(res => {
          let arr = []
          if (res.list.length > 5) {
            arr = res.list.splice(0, 5)
          } else {
            arr = res.list.splice(0, res.list.length)
          }
          this.list = arr
        })
      },
      onChangeChannel() {
        this.getData()
      }
    },
    mounted() {
      this.$$on('changeChannel')
    }
  }
</script>
<style lang='scss' scoped>
  .channel_page {
    width: 100%;
    margin-bottom: 15px;

    .main_label {
      display: flex;
      justify-content: space-between;
      line-height: 20px;
      border-left: 5px solid #2b85e4;
      padding-left: 8px;
      font-size: 15px;
      margin-bottom: 15px;

      .sort_btn {
        color: #2d8cf0;
        cursor: pointer;
        margin-right: 10px;
        font-size: 13px;
      }
    }

    .channel_content {
      border: 1px solid #ccc;
      padding: 15px;
      border-radius: 5px;

      .title {
        // padding-bottom: 10px;
        font-size: 14px;
        border-bottom: 1px solid #ccc;
      }

      .item {
        padding-top: 15px;

        ::v-deep .ivu-tooltip-rel {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: 100px;
        }

        .item_num {
          width: 40px;

          span {
            display: inline-block;
            width: 50%;
            text-align: center;
          }
        }
      }

      .channel_flex {
        display: flex;
        justify-content: space-between;
        padding-bottom: 10px;

        .item_num {
          width: 60px;
        }
      }

      .channel_name {
        width: 120px;
      }
    }
  }
</style>